{% extends "base.html" %}

{% block title %}语音唤醒{% endblock %}

{% block sidebar %}
<div class="list-group">
    <a href="{{ url_for('audio_monitor') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_monitor' %}active{% endif %}"><i class="bi bi-mic"></i> 声音监控</a>
    <a href="{{ url_for('audio_wake') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_wake' %}active{% endif %}"><i class="bi bi-mic-fill"></i> 语音唤醒</a>
    <a href="{{ url_for('audio_tts') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_tts' %}active{% endif %}"><i class="bi bi-chat-text"></i> 语音合成</a>
    <a href="{{ url_for('audio_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_test' %}active{% endif %}"><i class="bi bi-volume-up"></i> 播放测试</a>
    <a href="{{ url_for('audio_speak_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_speak_test' %}active{% endif %}"><i class="bi bi-mic"></i> 语音识别</a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid px-2">
    <div class="row">
        {# <div class="col-md-3">
            <!-- 可放置设置或说明 -->
        </div> #}
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">语音唤醒</h4>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="display-1 text-primary mb-3">
                            <i class="bi bi-mic-circle"></i>
                        </div>
                        <p class="lead" id="recognitionStatus">等待唤醒词...</p>
                    </div>
                    <div class="alert alert-info" id="recognizedText" style="display: none;">
                        <i class="bi bi-chat-quote"></i> <span id="recognizedContent"></span>
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-list-check"></i> 可用命令</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <i class="bi bi-camera"></i> 拍照
                                </li>
                                <li class="list-group-item">
                                    <i class="bi bi-camera-video"></i> 开始录像
                                </li>
                                <li class="list-group-item">
                                    <i class="bi bi-stop-circle"></i> 停止录像
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <i class="bi bi-lightbulb"></i> 开灯
                                </li>
                                <li class="list-group-item">
                                    <i class="bi bi-lightbulb-off"></i> 关灯
                                </li>
                                <li class="list-group-item">
                                    <i class="bi bi-volume-up"></i> 调整音量
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let isListening = false;

function startListening() {
    if (!isListening) {
        // 实现语音监听功能
        isListening = true;
        document.getElementById('recognitionStatus').textContent = '正在监听...';
    } else {
        // 停止监听
        isListening = false;
        document.getElementById('recognitionStatus').textContent = '等待唤醒词...';
    }
}

function saveSettings() {
    // 保存唤醒设置
}

function loadCommandHistory() {
    // 加载命令历史
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    loadCommandHistory();
});
</script>
{% endblock %} 